<template>
  <div class="list">
    <div class="list-item" v-for="(item, index) in currentData" :key="index" @click="goDetail(item)">
      <div class="width-125 height-70 pos-rel">
        <img v-if="item.coverUrl" class="width-125 height-70" :src="item.coverUrl" alt="">
        <div class="center-box" v-if="item.contentType === 2">
          <img class="width-24 height-24" :src="fileSpace + '/images/content-play-layer.png'" alt="" v-if="item.contentType === 2 && fileSpace">
        </div>
        <div class="center-box invalid-box" v-if="item.status === 0">
          <div class="invalid">已失效</div>
        </div>
      </div>
      <div class="flex-column-left flex-item mar-l-10">
        <div class="line-2">{{item.contentName}}</div>
        <div class="flex flex-between item-bottom font-12 font-color-6">
          <span>{{item.createTime}}</span>
          <div class="flex flex-between">
            <div class="v-align-c">
              <img class="width-16 height-11" :src="fileSpace + '/images/content-view-icon.png'" alt="" v-if="item.contentType === 1 && fileSpace">
              <img class="width-14 height-14" :src="fileSpace + '/images/content-play-icon.png'" alt="" v-if="item.contentType === 2 && fileSpace">
              <div class="mar-l-3 width-26">{{item.accessCount}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 数据列表
    dataList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      currentData: []
    }
  },
  watch: {
    dataList: {
      deep: true,
      immediate: true,
      handler(newVal) {
        // 将父组件传入的数据做一个深拷贝
        this.currentData = this.$utils.deepClone(this.dataList)
      }
    }
  },
  methods: {
    goDetail(val) {
      if (val.status !== 1) return
      this.$pt.navigateTo({ url: `/pages/home/content-center/content-detail/main?contentInfoId=${val.contentInfoId}&contentName=${val.contentName}` })
    }
  }
}
</script>
<style lang="less" scoped>
.list-item{
  margin-left: 15px;
  padding: 15px 15px 15px 0;
  border-bottom: 1rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}
.line-2{
  font-size: 15px;
  font-weight: bold;
  line-height: 21px;
  height: unset;
}
.flex-column-left{
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.item-bottom{
  width: 100%;
}
.center-box{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
}
.invalid-box{
  background-color: rgba(0, 0, 0, 0.5);
  .invalid{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    text-align: center;
    line-height: 54px;
    color: white;
    font-size: 16px;
    border: 1px solid white;
  }
}
</style>
